<template>
  <!-- This section should be hidden by default and shown when there are todos -->
  <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="toggleChecked">
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- These are here just to show the structure of the list items -->
      <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
      <li :class="{completed: item.flag, editing: item.id === currentId}" v-for="item in showList" :key="item.id">
        <div class="view">
          <input @change="changeState(item.id)" class="toggle" type="checkbox" :checked="item.flag">
          <label @dblclick="showEdit(item.id)">{{ item.name }}</label>
          <button class="destroy" @click="delTodo(item.id)"></button>
        </div>
        <input class="edit" @keyup.enter="editTodo(item.id, $event)" :value="item.name" @blur="hideEdit(item.id)">
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data () {
    return {
      currentId: -1
    }
  },
  computed: {
    showList () {
      return this.$store.state.showList
    },
    toggleChecked: {
      get () {
        return this.$store.getters.isCheckedAll
      },
      set (value) {
        this.$store.commit('toggleChecked', value)
      }
    }
  },
  methods: {
    delTodo (id) {
      this.$store.commit('delTodo', id)
    },
    showEdit (id) {
      // this.$store.commit('showEdit', id)
      this.currentId = id
    },
    editTodo (id, e) {
      this.$store.commit('editTodo', { id, value: e.target.value })
      this.hideEdit(id)
    },
    changeState (id) {
      this.$store.commit('changeState', id)
    },
    hideEdit (id) {
      this.currentId = -1
    }
  }
}
</script>

<style>

</style>
